<template>
  <div>
    <div style="width: 1500px;margin: auto">
      <div style="margin-left: 55px">
        共找到相关结果<font color="red">{{ total }}</font>个<br>
        <font size="5">相关视频</font><el-button :type="type1" round @click="all()">全部</el-button> <el-button round :type="type2" @click="vedio()">热播视频</el-button>
      </div>
      <el-row>
        <el-col :span="10" v-for="(o, index) in listvideo" :key="index" :offset="index > 0 ? 1 : 1" style="width: 300px;height: 250px;margin-top: 20px">
          <el-card :body-style="{ padding: '0px' }" style="border-radius: 20px">
            <div style="cursor: pointer" @click="video(o.vId)">
            <img :src="o.vPic" class="image3">
            <div style="padding: 0px;font-size: 18px">
              <span v-html="o.vType+':'"></span><span v-html="o.vName"></span>
            </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: "showvideo",
  data() {
    return {
      currentDate: new Date(),
      type1: '',
      type2: '',
      listvideo: [],
      total:'',
      word:''

    }
  },
  methods: {
    vedio() {
      this.type1 = "";
      this.type2 = "danger";
      this.hotvideo();
    },
    all() {
      this.type2 = "",
        this.type1 = "danger";
         this.likeVideo();
    },
    likeVideo(){
      axios.post("http://localhost:7000/live-search/search/likeVideo",{
        word:this.word,
      }).then(res=>{
        if(res.data.code==200){
          this.listvideo=res.data.data;
          this.total=res.data.total;
        }
      })
    },
    hotvideo(){
     this.word="热播视频";
      axios.post("http://localhost:7000/live-search/search/likeVideo",{
        word:this.word,
      }).then(res=>{
        if(res.data.code==200){
          this.listvideo=res.data.data;
          this.total=res.data.total;
          this.word='';
        }
      })
    },
    video(id){
      this.$router.push({name:'videos',params:{id:id}})
    }
  },
  mounted() {
    this.type1="danger"
    this.word=this.$route.params.word;
    this.likeVideo();
  }
}
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 50px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image3 {
  width: 320px;
  height: 150px;
  margin: auto;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

<style scoped>

</style>

